<template>
<div>
    <div
      v-if="dialog"
      class="ant-popover  ant-popover-placement-rightTop"
      style="left:55%;top:55%;transform-origin: -4px 0px;"
    >
      <div class="ant-popover-content">
        <div class="ant-popover-arrow" /><div
          class="ant-popover-inner"
          role="tooltip"
        >
          <div>
            <div class="ant-popover-inner-content">
              <div
                class="add-node-popover"
                data-spm-anchor-id="0.0.0.i102.2f244490UdKR44"
              >
                <div class="add-node-popover-header">
                  <span>选择一个动作</span>
                  <a-button @click="dialog1 = false" type="text" icon="close"></a-button>
                </div>
                <div class="add-node-popover-body">
                  <div v-for="item in action"
                    :key="item.key"
                  >
                    <div class="addnode_popover_title">
                      {{item.label}}
                    </div>
                    <div class="addnode_popover_container">
                    <div
                      v-for="itemAction in item.array"
                      :key="itemAction.name"
                      class="add-node-popover-item"
                      @click="handleClick(itemAction)"
                    >
                      <div class="add-node-popover-item-icon"></div>
                      <p>{{itemAction.name}}</p>
                    </div>
                  </div>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <a-modal v-model="filterTypeVisible" title="在审批节点下添加分支有两种选择：" centered @ok="handleOk">
      <a-radio-group v-model="conditionSubType" @change="onChange">
        <div>
          <a-radio :value="0">
            <span style="font-size:16px">添加普通分支</span>
          </a-radio>
          <div>只对“通过”审批的数据进行分支处理</div>
        </div>
        <div style="margin-top: 15px;">
          <a-radio :value="1">
            <span style="font-size:16px">添加审批结果分支</span>
          </a-radio>
          <div>分支固定为“通过”和“未通过”。如果你同时需要对“未通过”审批的数据进行处理时选择此分支</div>
        </div>
      </a-radio-group>
    </a-modal>
</div>
</template>
<script>
import {uuid} from "@/utils/utils"
export default {
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      default: undefined
    }
  },
  data(){
    return{
      dialog1: false,
      filterTypeVisible: false,
      conditionSubType: 0,
      item: {},
    }
  },
  watch: {
    'dialog' (val) {
      this.dialog1 = val
    },
    dialog1 (val) {
      this.$emit('update:dialog', val)
    }
  },
  methods: {
    handleClick (item) {
      this.dialog1 = false
      switch (item.type) {
        case "ACTION":
          this.addAction(item)
          break
        case 'CONDITION':
          this.addCondition(item)
          break
      }
    },
    addAction (item) {
      let _this = this
      let node = Object.assign(JSON.parse(JSON.stringify(item)), {
        prevId: _this.node.nodeId,
        nodeId: uuid()
      })
      this.$emit('addnode', node)
    },
    handleOk(){
      this.filterTypeVisible = false
      let item = this.item
      let _this = this
      let nodeId = uuid()
      if(this.conditionSubType === 1){
        let node = Object.assign(JSON.parse(JSON.stringify(item)), {
          prevId: _this.node.nodeId,
          nodeId,
          conditionNodes: [
            Object.assign(JSON.parse(JSON.stringify(_this.condition)),{
              prevId: nodeId, nodeId: uuid(), subType: 1
            }),
            Object.assign(JSON.parse(JSON.stringify(_this.condition)),{
              prevId: nodeId, nodeId: uuid(), subType: 1
            }),
          ],
          subType: 1
        })
        node.conditionNodes[0].inputs = {
          approved: true
        }
        node.conditionNodes[1].inputs = {
          approved: false
        }
        this.$emit('addnode', node)
      }else {
          let node = Object.assign(JSON.parse(JSON.stringify(item)), {
            prevId: _this.node.nodeId,
            nodeId,
            conditionNodes: [
              Object.assign(JSON.parse(JSON.stringify(_this.condition)),{
                prevId: nodeId, nodeId: uuid()
              }),
              Object.assign(JSON.parse(JSON.stringify(_this.condition)),{
                prevId: nodeId, nodeId: uuid()
              }),
            ]
          })
          this.$emit('addnode', node)
      }
    },
    addCondition (item) {
      let _this = this
      let nodeId = uuid()
      this.item = item
      if(this.node.stepType === "APPROVE"){
        this.filterTypeVisible = true
      }else{
          let node = Object.assign(JSON.parse(JSON.stringify(item)), {
            prevId: _this.node.nodeId,
            nodeId,
            conditionNodes: [
              Object.assign(JSON.parse(JSON.stringify(_this.condition)),{
                prevId: nodeId, nodeId: uuid()
              }),
              Object.assign(JSON.parse(JSON.stringify(_this.condition)),{
                prevId: nodeId, nodeId: uuid()
              }),
            ]
          })
          this.$emit('addnode', node)
      }
    }
  },
  computed:{
    action () {
      let action = this.$store.getters?.nodeDefinitions?.action || []
      let newAction = [
        {
          key: "datadeal",
          label: "数据处理",
          array: []
        },
        {
          key: "component",
          label: "构件",
          array: []
        },
        {
          key: "artificial",
          label: "人工",
          array: []
        },
        {
          key: "exploit",
          label: "开发",
          array: []
        },
      ]
      action.forEach(a => {
        if(a.type !== 'FILTER'){
          newAction.forEach(n => {
            if(n.label === a.group){
              n.array.push(a)
            }
          })
        }
      })
      return newAction
    },
    condition(){
      let condition = { name: '条件', type: 'FILTER' }
      let c = this.$store.getters?.nodeDefinitions?.action.find(c => c.type === 'FILTER')
      return  c || condition
    }
  }
}
</script>
